<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/main/css/main.css}">
    <title>美食分享平台</title>
</head>
<body>
<!-- 顶部导航栏 -->
<div th:replace="common/m_topbar::m_topbar"></div>
<!-- 主要内容 -->
<div class="container">
    <div class="col-sm-12">
        <ul class="nav nav-pills nav-stacked" style="margin-top: 80px">
            <li class="media" th:each="food:${foods}">
                <div class="media-left">
                    <a th:href="'/foodshare/main/foodDetail/'+${food.foodId}">
                        <img height="180" width="200" th:src="${food.image}"></a>
                </div>
                <div class="media-body">
                    <div style="width: 600px;height: 20px;">
                        <a th:href="'/foodshare/main/foodDetail/'+${food.foodId}">
                            <h4 class="media-heading" th:text="${food.title}"></h4></a>
                    </div>
                    <div style="width: 600px;height: 120px">
                        <p th:text="${food.detail}"></p>
                    </div>
                    <form class="form-group" style="width: 300px;height: 30px;bottom: 0" action="/foodshare/main/collect" method="post">
                        <div th:each="ur:${users}" th:if="${ur.userId} eq ${food.userId}">
                            <a th:href="'/foodshare/main/personal/'+${ur.userId}">
                                <img style="width: 30px" class="img-circle"
                                     th:src="${ur.head}"></a>
                            <a th:href="'/foodshare/main/personal/'+${ur.userId}">
                                <span th:text="${ur.username}"></span></a>
                            <input type="hidden" th:value="${user.userId}" name="userId">
                            <input type="hidden" th:value="${food.foodId}" name="foodId">
                            <input type="hidden" value="1" name="status">
                            <button id="collect" style="margin-left: 85px;background-color: white;outline:none;border: none;position: relative;width: 100px;height: 30px" type="submit">
                                <img height="20" width="20" th:src="@{/main/img/beforecollect.svg}">
                                <span style="font-size: 13px">收藏</span>
                            </button>
                        </div>
                    </form>
                    <button id="clcollect" th:each="collect:${collects}" th:if="${user.username} ne 'nobody' and ${collect.foodId} eq ${food.foodId} and ${collect.status} eq 1" style="right: 655px;bottom:40px;background-color: white;border: none;display: block;z-index: 2;position: absolute">
                        <a style="text-decoration: none" th:href="@{/collect/delete/}+${collect.collectId}">
                            <img height="20" width="20" th:src="@{/main/img/aftercollect.svg}">
                            <span style="font-size: 13px">取消收藏</span>
                        </a>
                    </button>
                </div>
                <br/>
            </li>
        </ul>
    </div>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <!-- 首页 -->
            <li class="page-item">
                <a class="page-link" th:href="'/foodshare/main/food?page=0'">首页</a>
            </li>
            <!-- 上一页 -->
            <li class="page-item" th:if="${foods.hasPrevious()}">
                <a class="page-link" th:href="'/foodshare/main/food?page=' + ${foods.previousPageable().getPageNumber()}" th:text="上一页"></a>
            </li>
            <!-- 中间页 -->
            <li class="page-item" th:each="page:${#numbers.sequence(0, foods.getTotalPages() - 1)}">
                <a class="page-link" th:href="'/foodshare/main/food?page=' + ${page}" th:text="${page + 1}" th:if="${page ne foods.pageable.getPageNumber()}"></a>
                <a class="page-link" th:href="'/foodshare/main/food?page=' + ${page}" th:text="${page + 1}" th:if="${page eq foods.pageable.getPageNumber()}" th:style="'font-weight:bold;background: #6faed9;'"></a>
            </li>
            <!-- 下一页 -->
            <li class="page-item" th:if="${foods.hasNext()}">
                <a class="page-link" th:href="'/foodshare/main/food?page=' + ${foods.nextPageable().getPageNumber()}" th:text="下一页"></a>
            </li>
            <!-- 尾页 -->
            <li class="page-item">
                <a class="page-link" th:href="'/foodshare/main/food?page=' + ${foods.getTotalPages() - 1}">尾页</a>
            </li>
        </ul>
    </nav>
</div>
<!-- 底部 -->
<div th:replace="common/m_bottom::m_bottom"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>